<script>
	var detailoption={
					sidePagination:"client",
					showExport: false,
					clickToSelect: true,// 单击行即可以选中
					singleSelect: true, //设置true禁止多选
					exportDataType: 'all',
					exportTypes: ['doc', 'excel'], //导出文件类型
					showToggle: true,  //是否显示视图切换按钮
					showRefresh: false,// 是否显示刷新按钮
					showColumns: true,//是否显示所有的列
					showPaginationSwitch: true,
					columns:[{
						field : "button",
						title : '<button class="Add btn btn-default" onclick="AddDetailTable($(this).val(),$(this).parent().parent().parent().parent().parent().attr('+"'id'"+'))">新增</button>',
						formatter : '<button class="Edit btn btn-default">修改</button><button class="Del btn btn-default">删除</button>',
						events:{"click .Edit": function (e, value, row, index) { EditDetailTable(row,$(this).attr("$el").attr("id"),index)},"click .Del": function (e, value, row, index) { DelDetailTable(row,$(this).attr("$el").attr("id"),index)}},
						visible: true,
						align: "center",
						valign: "middle"
						}, {
						field: "systemid",
						title: "系统id",
						visible: true,
						align: "center",
						valign: "middle"
						}, {
						field: "systemname",
						title: "系统名称",	
						visible: true,
						align: "center",
						valign: "middle"
			}],
					onDblClickRow: function (row,$element) {
						if (actions.includes("%var_detailaction2%")) {
							EditDetailTable(row,$element.parent().parent().attr("id"),$element.data("index"));
						}
					}
				};
	var tableoption={
			toolbar: '#toolbar',//工具按钮用哪个容器
			clickToSelect: true,// 单击行即可以选中
			singleSelect: true, //设置true禁止多选
			sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
            detailView: true,                   //是否显示父子表
			showExport: true,
			exportDataType: 'all',
			exportTypes: ['doc', 'excel'], //导出文件类型
			showToggle: true,  //是否显示视图切换按钮
			showRefresh: true,// 是否显示刷新按钮
			showColumns: true,//是否显示所有的列
			search: true, // 开启搜索功能
			pagination: true,// 开启分页功能
			sortName: "operatorid", // 设置默认排序为 name
			columns: [{
				field: "checked",
				checkbox: true
				}, {
				field: "tokeninterval",
				title: "令牌时长默认180分钟",
				align: "center",
				valign: "middle"
				}, {
				field: "tokentype",
				title: "令牌类型1默认单人登录2多人登录",
				align: "center",
				valign: "middle"
				}, {
				field: "isused",
				title: "使用",
				align: "center",
				formatter : function (value, row, index) { switch(value) {case 1 :return "是"; default : return "否"}},
				valign: "middle"
				},{
				field: "accounts",
				title: "帐号",
				align: "center",
				valign: "middle"
				}, {
				field: "operatorname",
				title: "员工姓名",
				align: "center",
				valign: "middle"
				}, {
				field: "operatorid",
				title: "员工编号",
				visible: false,
				align: "center",
				valign: "middle"
			}],
			onDblClickRow: function (row) {
				if (actions.includes("127")) {
					row.checked=true;
					EditTable(row);
				}
			},
			onExpandRow: function (index, row, $detail){
				var cur_table = $detail.html('<table class="table-striped"></table>').find('table');
				$(cur_table).bootstrapTable(detailoption);
				if (row.sysoperjson!=null) { $(cur_table).bootstrapTable('load', row.sysoperjson); }
				// cur_table.find("button.Add:first").val(row.operatorid);
				cur_table.find("button.Add").hide()
				cur_table.find("button.Edit").hide()
				cur_table.find("button.Del").hide()
				// if (!actions.includes("%var_detailaction1%")) { cur_table.find("Add").hide()};
				// if (!actions.includes("%var_detailaction2%")) { cur_table.find("Edit").hide()};
				// if (!actions.includes("%var_detailaction3%")) { cur_table.find("Del").hide()};
				// if (!(actions.includes("%var_detailaction1%")||actions.includes("%var_detailaction2%")||actions.includes("%var_detailaction3%"))) {cur_table.bootstrapTable("hideColumn","button")};
			}
		};
	$(function() {
		checkaction(new Array("126","127","129","130"));		
		$("#DetailTable").bootstrapTable(detailoption);
		$("#QueryTable").bootstrapTable(tableoption);
		$("#QueryTable").bootstrapTable('showLoading');
		ajaxarr([{
				url:"sysinfo/systeminfo_query",
				data:{token:token},
				title:"获取系统信息失败！",
				func: function(data) {
					var systeminfo="<option value=''>请选择系统名称</option>";
					if (data.info.total>0) {
						for (i=0,j=data.info.rows.length;i<j;i++) { systeminfo+="<option value='"+ data.info.rows[i].systemid + "'>"+data.info.rows[i].systemname+"</option>";}
					}
					$("#detail_systemid").html(systeminfo);
				$(".selectpicker").selectpicker("refresh");
				}
		}]);
		QueryTable();
		$(".selectpicker").selectpicker("refresh");
		$("#myModal").on("shown.bs.modal",function(e){ if ($("#txt_operatorid").attr("disabled")) { $("#txt_SaveModal").focus() } else {$("#txt_operatorid").focus()}; });
	});
	
	function AddTable() {//新增
		$("#txt_operatorid").val("");
		$("#txt_tokeninterval").val("");
		$("#txt_tokentype").val("");
		$("#txt_accounts").val("");
		$("#txt_operatorname").val("");
		$("#txt_operatorid").attr("disabled",false);
		$("#DetailTable").bootstrapTable('destroy').bootstrapTable(detailoption);
		if (actions.includes("%var_detailaction1%")) { $("#DetailTable").bootstrapTable("showColumn","button"); $("#DetailTable").find("Add").show()};
		if (actions.includes("%var_detailaction2%")) { $("#DetailTable").bootstrapTable("showColumn","button"); $("#DetailTable").find("Edit").show()};
		if (actions.includes("%var_detailaction3%")) { $("#DetailTable").bootstrapTable("showColumn","button"); $("#DetailTable").find("Del").show()};
        $("#myModalLabel").html("新增");
        $("#myModal").modal();
	};
	
	function EditTable(row) {
		if (row==null) {
			if ($("#QueryTable").bootstrapTable('getSelections').length == 0) {
				alert("请先选择要修改的数据!");
				return;
			};
			row=$("#QueryTable").bootstrapTable('getSelections')[0];
		}
		$("#txt_operatorid").val(row.operatorid);
		if (row.tokeninterval!=null) { $("#txt_tokeninterval").val(row.tokeninterval) } else { $("#txt_tokeninterval").val("")};
		if (row.tokentype!=null) { $("#txt_tokentype").val(row.tokentype) } else { $("#txt_tokentype").val("")};
		if (row.accounts!=null) { $("#txt_accounts").val(row.accounts) } else { $("#txt_accounts").val("")};
		if (row.operatorname!=null) { $("#txt_operatorname").val(row.operatorname) } else { $("#txt_operatorname").val("")};
		$("#txt_operatorid").attr("disabled",true);
		if (row.sysoperjson!=null) {$("#DetailTable").bootstrapTable('load', JSON.parse(JSON.stringify(row.sysoperjson)));} else{$("#DetailTable").bootstrapTable('destroy').bootstrapTable(detailoption);}
        $("#DetailTable").find("button.Add:first").val(row.operatorid);
		$("#myModalLabel").html("修改");
        $("#myModal").modal();
	};
	
	function CommitTable() {
		var commitdata={
			operatorid:$("#txt_operatorid").val(),
			tokeninterval:$("#txt_tokeninterval").val(),
			tokentype:$("#txt_tokentype").val(),
			accounts:$("#txt_accounts").val(),
			operatorname:$("#txt_operatorname").val(),
			token:token,
			sysoperjson:JSON.stringify($("#DetailTable").bootstrapTable("getData")),
		};
		if ($("#myModalLabel").html()=="新增") {
			ajaxarr([{
				url:"sysinfo/operinfo_add",
				title:"新增数据失败！",
				data:commitdata,
				func:function(data) {
					alert("新增数据成功！id："+data.info.id);
					QueryTable(commitdata.operatorid);
					$("#myModal").modal("hide");
				}
			}]);
		} else {
			ajaxarr([{
				url:"sysinfo/operinfo_edit",
				title:"修改数据失败！",
				data:commitdata,
				func:function(data) {
					alert("修改数据成功！");
					QueryTable(commitdata.operatorid);
					$("#myModal").modal("hide");
				}
			}]);		
		};
	};
	
	function DelTable() {
		var row=$("#QueryTable").bootstrapTable('getSelections')[0];
		if (row==null) {
			alert("请先选择要显示/隐藏的数据!");
			return;
		}
		var info=(row.isused==0) ? "显示" : "隐藏" ;
		if(confirm( "您真的确定要"+info+"吗？") == true) {
			ajaxarr([{
				url: "sysinfo/operinfo_del",
				title: info + "数据失败！",
				data:{operatorid:row.operatorid,isused:(row.isused==0) ? 1 : null},
				func: function(data) {
					alert(info+"成功！");
                    QueryTable();
				}
			}]);
		}
	};
	
	function QueryTable(id) {
		$("#QueryTable").bootstrapTable('showLoading');
		ajaxarr([{
				url:"sysinfo/operinfo_query",
				title:"获取员工信息失败，请刷新！",
				data:{token:token},
				func: function (data) {
					if (data.info.total==0) { $("#QueryTable").bootstrapTable("destroy").bootstrapTable(tableoption); } 
					else {	
						$("#QueryTable").bootstrapTable('load', data.info.rows); 
						if (id) {
							for (var i=data.info.total;i>0;i--) {
								if (data.info.rows[i-1].operatorid==id) {
									$("#QueryTable").bootstrapTable('selectPage', Math.ceil(i/$("#QueryTable").bootstrapTable('getOptions').pageSize));
									i=i%$("#QueryTable").bootstrapTable('getOptions').pageSize-1;	
									$("#QueryTable").bootstrapTable('expandRow', (i>=0) ? i : i + $("#QueryTable").bootstrapTable('getOptions').pageSize);
									break;
								};							
							}
						}
					};
					$("#QueryTable").bootstrapTable('hideLoading');
				}
		}]);		
	};
	
	function AddDetailTable(data,id) {
		$("#detail_systemid").val("");
		$("#detail_systemid").attr("disabled",false);
		if (id=="DetailTable") { $("#SaveDetailModal").text("确定") } else { $("#SaveDetailModal").text("保存") };
        $("#myDetailModalLabel").html("新增");
        $("#myDetailModal").modal();
	}

	function EditDetailTable(row,id,index) {
		if (row==null) {
			if ($("#QueryTable").bootstrapTable('getSelections').length == 0) {
				alert("请先选择要修改的数据!");
				return;
			};
			var row=$("#QueryTable").bootstrapTable('getSelections')[0];
		}
		if (row.systemid!=null) { $("#detail_systemid").selectpicker("val",row.systemid) } else { $("#detail_systemid").selectpicker("val","")};
		$("#detail_systemid").attr("disabled",false);
		if (id=="DetailTable") { $("#SaveDetailModal").text("确定") } else { $("#SaveDetailModal").text("保存") };
		$("#SaveDetailModal").val(index);
        $("#myDetailModalLabel").html("修改");
        $("#myDetailModal").modal();
	}

	function CommitDetailTable(index) {
		var commitdata={
			systemid:($("#detail_systemid").val()=="") ? null : $("#detail_systemid").val(),
			systemname:$("#detail_systemid option:selected").text()
		};
		if ($("#myDetailModalLabel").html()=="新增") {
			$("#DetailTable").bootstrapTable("load",$("#DetailTable").bootstrapTable("getData").push(commitdata));
		} else {
			var data=$("#DetailTable").bootstrapTable("getData");
			data.splice(index,1,commitdata);
			if (data!=null) { $("#DetailTable").bootstrapTable("load",data) } else { $("#DetailTable").bootstrapTable('destroy').bootstrapTable(detailoption) };
		};
		$('#myDetailModal').modal('hide');
	};
	
	function DelDetailTable(index) {
		var data=$("#DetailTable").bootstrapTable("getData");
		data.splice(index,1);
		if (data!=null) { $("#DetailTable").bootstrapTable("load",data) } else { $("#DetailTable").bootstrapTable('destroy').bootstrapTable(detailoption) };
	}
</script>
<table id="QueryTable" class='table-striped'></table>
<div id="toolbar" class="btn-group">
	<button id="126" type="button" style="display:none;" class="btn btn-default" onclick="AddTable()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button>
	<button id="127" type="button" style="display:none;" class="btn btn-default" onclick="EditTable()"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button>
	<button id="129" type="button" style="display:none;" class="btn btn-default" onclick="DelTable()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>显示/隐藏</button>
	<button id="130" type="button" style="display:none;" class="btn btn-default" onclick="QueryTable()"><span class="glyphicon glyphico-query" aria-hidden="true"></span>查询</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" >
	<div class="modal-dialog" >
		<div class="modal-content" >
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel"></h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body form-inline">
				<label for="txt_operatorid" class="col-lg-3 text-center">员工ID</label><input id="txt_operatorid" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {txt_tokeinterval.focus()}}" type="text" placeholder="员工ID"/>
				<label for="txt_tokeninterval" class="col-lg-3 text-center">令牌时长默认180分钟</label><input id="txt_tokeninterval" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {txt_tokentype.focus()}}" type="text" placeholder="令牌时长默认180分钟"/>
				<label for="txt_tokentype" class="col-lg-3 text-center">令牌类型1默认单人登录2多人登录</label><input id="txt_tokentype" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {txt_birthday.focus()}}" type="text" placeholder="令牌类型1默认单人登录2多人登录"/>
				<label for="txt_accounts" class="col-lg-3 text-center">帐号</label><input id="txt_accounts" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {txt_phone.focus()}}" type="text" placeholder="帐号"/>
				<label for="txt_operatorname" class="col-lg-3 text-center">员工姓名</label><input id="txt_operatorname" class="form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {txt_operatorid.focus()}}" type="text" placeholder="员工姓名"/>
			</div>
			<table id="DetailTable" class="table-striped"></table>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="SaveModal" onclick="CommitTable()"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal" ><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="myDetailModal" tabindex="-1" >
	<div class="modal-dialog" >
		<div class="modal-content" >
			<div class="modal-header">
				<h4 class="modal-title" id="myDetailModalLabel"></h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body form-inline">
				<label for="detail_systemid" class="col-lg-3 text-center">系统id</label><select id="detail_systemid" class="selectpicker form-control col-lg-3" onkeypress="{ if (event.keyCode==13) {detail_operatorid.focus()}}" title="请选择系统id"></select>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="SaveDetailModal" onclick="CommitDetailTable($(this).val())"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal" ><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
			</div>
		</div>
	</div>
</div>
